<template>
  <div>
    <h3 style="padding-left: 10px;">系统功能模块访问情况</h3>
    <div id="reportVisitLog"></div>
  </div>
</template>

<script>
import { reqSysModelVisitLogPieDown } from "@/api/report/visitlog";

import Highcharts from "highcharts/highstock";

export default {
  props: {},
  data() {
    return {
      chart: null,
      options: {
        chart: {
          type: "pie"
        },
        title: {
          text: ""
        },
        subtitle: {
          text: ""
        },
        lang: {
          drillUpText: "◁ 返回"
        },
        credits: {
          enabled: false
        },
        plotOptions: {
          series: {
            dataLabels: {
              enabled: true,
              format: "{point.name}: {point.y:.1f}%"
            }
          }
        },
        tooltip: {
          headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
          pointFormat:
            '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
        },
        series: [
          {
            name: "",
            colorByPoint: true,
            data: []
          }
        ],
        drilldown: {
          series: []
        }
      }
    };
  },
  components: {},
  mounted() {},
  created() {},
  methods: {
    async init(query) {
      let res = await reqSysModelVisitLogPieDown(query);
      if (res.code === 200) {
        this.options.series[0].data = res.data.pieDowns;
        this.options.drilldown.series = res.data.drilldowns;
        this.showChart();
      }
    },
    showChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Highcharts.Chart("reportVisitLog", this.options);
    }
  }
};
</script>


<style lang="scss" scoped>
</style>